import React, { useEffect, useState, useRef } from "react";
import { Collapse, Input, Tabs, Button, Image, Modal } from 'antd';
import { request } from 'dw-mx-request';
import classNames from 'classnames';
import addPic from './style/images/add64.png';
import delPic from './style/images/delete.png';
import './style/component.css';

export default function ImagePicker(props) {

    const [appID, setAppID] = useState('');
    const [pageID, setPageID] = useState('');
    const [viewImg, setViewImg] = useState(addPic);
    const [imgListShow, setImgListShow] = useState(false);
    const [imgList, setImgList] = useState([]);
    const [addShow, setAddShow] = useState(true);
    const [viewShow, setViewShow] = useState(false);
    const [viewName, setViewName] = useState('');

    useEffect(() => {
        setAppID(props.appid);
        setPageID(props.pageid);
    }, [props.appid, props.pageid]);

    const clickImage = async () => {
        setImgListShow(true);
        const res = await request('/mx/bigScreen/initBackGroundImg', {
            appid: appID,
            pageid: pageID
        });
        setImgList(JSON.parse(res));
    };

    const closeModel = () => {
        setImgListShow(false);
    };

    const selectImage = (item) => {
        const url = item['material_url'];
        setViewImg(url);
        props.changeValue(url);
        setImgListShow(false);
        setAddShow(false);
        setViewShow(true);
        setViewName(item['material_name']);
    };

    const deleteImage = () => {
        setAddShow(true);
        setViewShow(false);
        setViewName('');
        setViewImg('');
        props.changeValue('');
    };

    return (
        <div className={classNames('dlc-rp-ip', {
            'dlc-rp-ip-add-show' : addShow,
            'dlc-rp-ip-view-show' : viewShow
        })}>
            <div className={'dlc-rp-ip-add'}>
                <Image width={96} preview={false} src={addPic} onClick={()=>clickImage()} />
            </div>
            <div className={'dlc-rp-ip-view'}>
                <div className={'dlc-rp-ip-view-left'}>
                    <Image width={64} src={viewImg} />
                </div>
                <div className={'dlc-rp-ip-view-center'}>
                    <span className={'dlc-rp-ip-view-name'}>{viewName}</span>
                </div>
                <div className={'dlc-rp-ip-view-right'}>
                    <img className={'dlc-rp-ip-view-del'} src={delPic} onClick={()=>deleteImage()} />
                </div>
            </div>
            <Modal visible={imgListShow} width={720} footer={false} onCancel={()=>closeModel()}>
                {
                    imgList.map((item)=>{
                        // eslint-disable-next-line react/jsx-key
                        return <Image className={'dlc-rp-ip-image'} preview={false} width={220}
                                      src={item.material_url} onClick={()=>selectImage(item)}/>
                    })
                }
            </Modal>
        </div>
    );
}